<script setup lang="ts">
import { reqGetSearch } from "@/api/search";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { SearchRes } from "@/types/search";

const list = ref<SearchRes>([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const route = useRoute();
console.log(route.query.keywords);
// 无限加载
const onLoad = async () => {
    const { data } = await reqGetSearch(route.query.keywords, page.value);
    console.log(data);
    // 把每次加载的结果追加到this.list后面
    const arr = data.data.results;
    list.value = [...list.value, ...arr];
    page.value++;
    // 把loading关闭
    loading.value = false;
    // 判断是否已经全部加载了数据
    if (arr.length === 0) finished.value = true;
};
</script>
<template>
    <div class="search-result">
        <!-- 导航栏 -->
        <van-nav-bar
            :title="$route.query.keywords + '的搜索结果'"
            left-arrow
            fixed
            @click-left="$router.back()"
        />
        <!-- /导航栏 -->

        <!-- 文章列表 -->
        <van-list
            class="article-list"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-cell
                v-for="item in list"
                :key="item.art_id.toString()"
                :title="item.title"
                @click.native="
                    $router.push({
                        path: '/article',
                        query: { id: item.art_id },
                    })
                "
            />
        </van-list>
        <!-- /文章列表 -->
    </div>
</template>

<style lang="scss" scoped>
.search-result {
    .article-list {
        margin-top: 39px;
    }
}
</style>
